<template>
  <div class="app">
    <h2>我是App组件</h2>
    <button @click="n+=1">点我n+1</button>
    <h4>当前的n值是：<span v-text="n"></span></h4>
    <h4>当前的n值*10：<span v-big="n"></span></h4>
    <h4>当前的n值美化后：<span v-beauty="n"></span></h4>
    <h4>当前的str截取第一位后：<span v-cut="str"></span></h4>
    <Child/>
  </div>
</template>

<script>
  import Child from './components/Child'

  export default {
    name:'App',
    components:{Child},
    data() {
      return {
        n:9,
        str:'atguigu',
        x:900
      }
    },
    directives:{
      /* 
        1.big方法何时调用？—— 有人使用v-big指令时
        2.big方法中的this是谁？—— 爱谁谁，反正不是vc或vm，为什么这么做：让使用者只关注元素、表达式
        3.big方法被调用时会接收到什么参数？
      */
      // element是指令所在元素、
      big(element,binding){
        console.log('big',element,binding.value)
        element.innerText += binding.value * 10
      },
      beauty(element,binding){
        element.innerText = binding.value
        element.style.backgroundColor = 'red',
        element.style.color = 'yellow'
      },
      cut(element,{value}){
        element.innerText = value.slice(0,1)
      }
    }
  }
</script>

<style>
  .app {
    background-color: gray;
    padding: 10px;
  }
</style>